<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行机构</title>
    <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
</head>
<body>
    <div id="app" class="bank">
      <vxe-grid v-bind="gridOptions" style="height:auto;">
        <template #toolbar_tools>
          <el-button @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleOperation('add')">新增</el-button>
					</el-input>
				</template>
        <template #toolbar_buttons>
          <el-input placeholder="请输入银行机构代码或者机构名称"  style="width: 250px" clearable>
        </template>
        <template #operation="{ row }">
          <div class="operation-box">
            <el-button type="primary"
              link
              @click.stop="handleOperation('edit', row)">修改
            </el-button>
            <el-button type="danger"
              link
              @click.stop="handleOperation('delete', row)">删除
            </el-button>
          </div>
        </template>
      </vxe-grid>
      <div>
          <vxe-modal v-model="visible" :title="title" width="70%" height="40%" show-footer show-zoom resize remember>
            <template #default>
             <div>
              <el-form ref="unitFormRef"
              :model="form"
              :rules="rules"
              label-width="130px">
              <el-row >
                <el-col :span="8">
                  <el-form-item label="银行机构代码"
                  prop="name">
                  <el-input v-model="form.name"
                    placeholder="请输入银行机构代码"
                    clearable />
                </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="银行机构名称"
                  prop="name">
                  <el-input v-model="form.name"
                    placeholder="请输入银行机构名称"
                    clearable />
                </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="接入用户名"
                  prop="name">
                  <el-input v-model="form.name"
                    placeholder="请输入接入用户名"
                    clearable />
                </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="8">
                  <el-form-item label="接入密码"
                    prop="name">
                    <el-input v-model="form.name"
                      placeholder="请输入接入密码"
                      clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="授权白名单"
                  prop="name">
                  <el-input v-model="form.name"
                    placeholder="请输入授权白名单"
                    clearable />
                </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="加解密方式"
                    prop="name">
                    <el-select v-model="form.name" placeholder="请选择加解密方式">
                      <el-option
                        v-for="item in encryptList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row >
          <el-row >
            <el-col :span="8">
              <el-form-item label="AES秘钥"
                prop="name">
                <el-input v-model="form.name"
                  placeholder="请输入AES秘钥"
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SM2公钥"
              prop="name">
              <el-input v-model="form.name"
                placeholder="请输入SM2公钥"
                clearable />
            </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SM2私钥"
                prop="name">
                <el-input v-model="form.name"
                  placeholder="请输入SM2私钥"
                  clearable />
              </el-form-item>
            </el-col>
          </el-row >
          </el-form>
             </div>
            </template>
            <template #footer>
              <el-button @click="visible = false">取消</el-button>
              <el-button type="primary" @click="handleSure">确定</el-button>
            </template>
          </vxe-modal>
      </div>
    </div>
</body>
<script type="module">
  const { createApp, ref, reactive } = Vue
  createApp({
    setup() {
 let bankForm = {
  name: undefined,
  
}
const encryptList = ref([
  {
    label: 'AES',
    value: 0
  },
  {
    label: 'SM2',
    value: 1
  }
])
      const form = reactive({...bankForm})
      const defaultParams = reactive({
        keyWords: undefined
        })
      const gridOptions = reactive({
        border: true,
        align: null,
        height: 'auto',
        columnConfig: {
          resizable: true
        },
    toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools'
          }
        },
        rowConfig: {
         // 当鼠标移到行时，是否要高亮当前行
         isHover: true,
          // 当鼠标点击行时，是否要高亮当前行
		      isCurrent: true
      },
       // 通用分页配置
	    pagerConfig: {
	  	layouts: ['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
		  border: true,
		  pageSize: 20,
		  pageSizes: [20, 50, 100, 200],
		  background: true,
      },
        columns: [
          { type: 'seq', width: 50,   align: "center",fixed: "left",},
          { field: 'name', title: '银行机构代码', align: "center",width: 150 },
          { field: 'sex', title: '银行机构名称' , align: "center",width: 150 },
          { field: 'address', title: '接入用户名', align: "center",width: 150  },
          { field: 'name', title: '接入密码', align: "center",width: 150  },
          { field: 'sex', title: '授权白名单', align: "center",width: 150  },
          { field: 'address', title: '加解密方式', align: "center",width: 150  },
          { field: 'address', title: 'AES秘钥', align: "center",width: 150  },
          { field: 'address', title: 'SM2公钥', align: "center",width: 150 },
          { field: 'address', title: 'SM2私钥', align: "center",width: 150  },
          { field: 'address', title: '接入时间' , align: "center",width: 150 },
          { field: 'address', title: '操作' ,width: 100,fixed: "right", align: "center",slots: {default: "operation"} }
        ],
        data: [
          { id: 10001, name: 'Test1',  role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
        ]
      })
     const title = ref(null)
     const visible = ref(false)
     const rules = reactive({
          name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }],
 
  },)
      // 搜索
     const handleSearch = ()=>{
    }
  
    // 操作
    const handleOperation = async (type)=>{
      if (type === 'add') {
        title.value = '新增银行接入配置'
        visible.value = true
      } else if (type === 'edit') {
      title.value = '修改银行接入配置'
      visible.value = true
      } else if (type === 'delete') {
        const modalType =  await VXETable.modal.confirm('您确定要删除吗？')
        VXETable.modal.message({ content: `点击了 ${modalType}` })
      }
    }
    // 确定
    const handleSure = ()=>{
      visible.value = false
    }
      return {
        encryptList,
        rules,
        form,
        title,
        visible,
        defaultParams,
        gridOptions,
        handleSearch,
        handleOperation,
        handleSure
      }
    }
  }).use(ElementPlus).use(VXETable).mount('#app')
</script>
<style>
  .bank {
    height: 100%;
  }
  .operation-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
</html>
